<template>
    <div class="interface">
      <div class="c">
        <el-button class="d" @click="turn">返回</el-button>
      </div>
      <form class="box" method="post">
          <div style="text-align: center">
            <h1>查阅界面登录</h1>
          </div>
          <input type="text" name="" placeholder="请输入手机号" />
          <el-button class="b" @click="send">发送验证码</el-button>
          <input type="password" name="" placeholder="验证码" />
          <input type="submit" name="" value="登录" @click="Login" class="a" />
      </form>
    </div>
</template>

<script>
export default {
  methods: {
    Login () {
      this.$message({
        message: '登录成功',
        type: 'success'
      })
      this.$router.push('/csData')
    },
    turn () {
      this.$router.push('/Choose')
    },
    send() {
      this.$message({
        message: '发送验证码成功，请注意查收',
        type: 'success'        
      })
    }
  }
}
</script>

<style lang="less" scoped>
.interface {
 margin: 0;
 padding: 0;
 height: 100%;
 width: 100%;
 border-radius: 20px;
 background-image: url(../../assets/1.jpg);
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: 0px -50px;
}
.box {
 width: 450px;
 height: 500px;
 padding: 40px;
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 40px;
 transform: translate(-50%,-50%);
 background-color: #00000068;
 text-align: left;
 border-style: ridge;
}
.box input[type = "text"], .box input[type = "password"] {
  width: 180px;
  border: 0;
  background: none;
  font-size: 15px;
  display: inline-block;
  margin-bottom: 20px;
  text-align: center;
  border: 2px solid #c8d6e5;
  padding: 14px 10px;
  outline: none;
  color: #ffffff;
  border-radius: 24px;
  transition: 0.25s;
  margin-left: 40px;
}
h1 {
 color: #FFFFFF;
 text-transform: uppercase;
 font-size: 60px;
 // 粗细
 font-weight: 400;
 margin-bottom: 80px;
}

.box input[type = "text"]:focus, .box input[type = "password"]:focus {
 width: 220px;
 border-color: #FFFFFF;
}
.box input[type = "submit"] {
 border: 0;
 font-size: 17px;
 background: none;
 display: block;
 margin: 20px auto;
 text-align: center;
 border: 2px solid #FFFFFF;
 padding: 14px 40px;
 outline: none;
 color: #ffffff;
 border-radius: 24px;
 transition: 0.25s;
 cursor: pointer;
}
.box input[type = "submit"]:hover {
 background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
 font-size: x-large;
}
::-webkit-input-placeholder{
  color: #8d8dad;
}
.a {
  position: absolute;
  left: 50%;
  bottom: 10%;
  -webkit-transform: translate(-50%,0%);
}
.b {
  margin-left: 20px;
  border-radius: 24px;
  background-color: aquamarine;
  width: 95px;
  font-size: 15px;
  border: 2px solid #c8d6e5;
  padding: 14px 10px;
}
.c {
  position: relative;
  text-align: right;
}
.d {
  margin-top: 30px;
  margin-right: 50px;
  font-size: 18px;
  color: #8ec5fc;
  background: none;
}
.changeBox {
  width: 100%;
  height: 60%;
}
</style>
